<template>
    <div>
        <div v-title>我是代理商</div>
        <div class="navtop">
            <div>
                <div class="titleA">
                    余额(元)
                </div>
                <div class="titleB">
                    {{CashBalance}}<span v-show="this.AgentLevel==2"><img src="../image/Gold.png"></span><span v-show="this.AgentLevel==1"><img src="../image/Silver.png"></span>
                </div>
                <div class="titleC">
                    推荐奖励100元起提，免手续费。
                </div>
            </div>
        </div>
        <div class="jump" @click="Recommendation">
            <div>
                <span class="iconfont icon-tubiao303 iconA"></span>
                <span>我的推荐</span>
                <span></span>
                <span class="iconfont icon-youjiantou1 iconB"></span>
                <span>{{Infor}}个人</span>
            </div>
        </div>
        <div class="main" v-show="this.showtime!=0">
            <div v-for="item in datalist">
                <div>{{item.Remark}}<span class="FromMemberAccount" v-if="item.Remark.indexOf('佣金收益')!=-1">({{item.FromMemberAccount.slice(0,3)}}****{{item.FromMemberAccount.slice(7,11)}})</span>
                    <span v-if="item.UpdataMoney>0">+{{item.UpdataMoney}}元</span>
                    <span v-else>{{item.UpdataMoney}}元</span>
                </div>
                <div style="margin-top: 2px">{{item.AddTime}}</div>
            </div>

        </div>
        <div class="lookmore" @click="jump" v-show="this.showtime>=5">查看更多
            <span class="iconfont icon-youjiantou1 iconC"></span>
        </div>
        <div class="nomore" v-show="this.showtime>0 && this.showtime<5">暂无更多</div>
        <div class="nodata" v-show="this.showtime==0">
            <img src="../image/nodata.png">
        </div>
        <div class="bottombottonA" @click="Apply()" v-show="CashBalance!=0">申请提现</div>
        <div class="bottombottonA" style="background:#cccccc" v-show="CashBalance==0">申请提现</div>
    </div>
</template>
<script>
import api from '../fetch/api.js';
export default {
    data() {
        return {
            Infor: '',
            CashBalance: '',
            datalist: '',
            showtime: '',
            AgentLevel:'',
        }
    },
    mounted() {
        this.AllNumber()
        this.GetModel()
        this.GetMoneyListByPage()
    },
    methods: {
        AllNumber() {
            api.Post('Member/MemberInfo/AllNumber', {}).then(res => {
                this.Infor = res.Infor.split(',')[2]
            })
        },
        jump() {
            this.$router.push('/AccountList')
        },
        GetModel() {
            api.GetModel().then(res => {
                this.CashBalance = res.CashBalance;
                this.AgentLevel=res.AgentLevel
            });
        },
        GetMoneyListByPage() {
            api.Post('Member/MemberInfo/GetMoneyListByPage', { rows: 5, page: 1,TypeID:-1 }).then(res => {
                this.datalist = res.rows
                this.showtime = res.total
            })
        },
        Apply() {
            this.$router.push('/Apply')
        },
        Recommendation() {
            this.$router.push('/Recommendation')
        },
    },
}
</script>
<style src="../css/iconfont.css"></style>
<style scoped>
.navtop {
    background: #484e5e;
    width: 100%;
    padding-bottom: 22px;
}

.navtop>div {
    width: 89%;
    margin: 0px auto;
}

.titleA {
    font-size: 12px;
    padding-top: 16px;
    color: #ffffff;
}

.titleB {
    font-size: 36px;
    padding: 12px 0px;
    color: #ffffff;
}
.titleB span{
    float: right;
    width: 25%;
}
.titleB span img{
    width: 100%;
}
.titleC {
    font-size: 12px;
    padding-bottom: 16px;
    color: #ffffff;
}

.jump {
    width: 89%;
    margin: 0px auto;
    background: #fff;
    padding: 12px 0px;
    border-radius: 3px;
    margin-top: -20px;
}

.jump>div {
    width: 88%;
    margin: 0px auto;
    font-size: 14px;
    line-height: 20px;
}

.iconA {
    font-size: 20px;
    color: #484e5e;
    top: 2px;
    position: relative;
}

.iconB {
    color: #999999;
    float: right;
    font-size: 20px;
}

.jump>div :nth-child(2) {
    color: #333333;
}

.jump>div :nth-child(3) {
    color: #999999;
}

.jump>div :nth-child(5) {
    color: #f33e16;
    float: right;
}

.main {
    width: 100%;
    background: #fff;
    margin-top: 10px;
    padding-top: 10px;
}

.main>div {
    width: 88%;
    margin: 0px auto;
    font-size: 14px;
    line-height: 20px;
    border-bottom: 1px solid #f0f1f5;
    padding: 12px 0px;
}

.main>div :first-child {
    color: #333333;
    font-size: 14px;
}

.main>div :first-child span {
    float: right;
}

.main>div:last-child {
    font-size: 12px;
    color: #999999;
}

.lookmore {
    height: 40px;
    line-height: 40px;
    color: #666666;
    font-size: 12px;
    text-align: center;
    background: #fff;
    padding-bottom: 90px;
}

.iconC {
    color: #999999;
    font-size: 16px;
}

.bottombottonA {
    color: #fff;
    font-size: 16px;
    background: #2491ff;
    text-align: center;
    position: fixed;
    bottom: 0px;
    height: 49px;
    line-height: 49px;
    width: 100%;
}

.nomore {
    font-size: 14px;
    text-align: center;
    margin-top: 20px;
    color: #666
}
.FromMemberAccount{
    float: inherit !important;
}

.nodata {
    text-align: center;
    padding: 50px;
}

.nodata img {
    width: 45%;
}
</style>
